<script setup>
import { getplay, plays } from "../utils/api";
import { onMounted, defineEmits } from "vue";

import * as mars3d from "mars3d";
import "mars3d/dist/mars3d.css";
//引入cesium基础库
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "mars3d-cesium";
import "mars3d-heatmap";
import yujingxinxi from "@/assets/yujingxinxi.svg";
import youjiantou from "@/assets/youjiantou.svg";
import CloseIcon from "@/assets/CloseIcon.svg";
import jinqishijian from "@/assets/icon/jinqishijian.svg";
import { ElMessage } from "element-plus";
// import { it } from "element-plus/es/locale";
// import { Marker } from 'path/to/mars3d.graphic'
const emit = defineEmits(["camera-cal", "calobj", "pop-up"]);

// 地图变量
let maptd = null;
let pointLayer = null;
let yjlayer = null;
let donghaiLayer = null;
let xihaiLayer = null;
let yjobj = {};
let devpoint = {};
let layerObj = {};
let PopupObj = {};
let heatLayer = null;
let tiles3dLayer
const PersonModel = "//data.mars3d.cn/gltf/mars/man/walk.gltf";
let graphicLayer; // 矢量图层对象,用于graphic绑定展示
// 初始化地图
const maptdInit = () => {
  var mapOptions = {
    scene: {
      // 默认视角参数
      center: {
        lat: 39.119244,
        lng: 117.579352,
        alt: 10000.3,
        heading: 0,
        pitch: -90,
      },
      shadows: false, //是否启用日照阴影
      removeDblClick: true, //是否移除Cesium默认的双击事件

      //以下是Cesium.Viewer所支持的options【控件相关的写在另外的control属性中】
      sceneMode: 3, //3等价于Cesium.SceneMode.SCENE3D,

      //以下是Cesium.Scene对象相关参数
      showSun: true, //是否显示太阳
      showMoon: true, //是否显示月亮
      showSkyBox: true, //是否显示天空盒
      showSkyAtmosphere: true, //是否显示地球大气层外光圈
      fog: true, //是否启用雾化效果
      fxaa: true, //是否启用抗锯齿

      //以下是Cesium.Globe对象相关参数
      globe: {
        depthTestAgainstTerrain: false, //是否启用深度监测
        baseColor: "#546a53", //地球默认背景色
        showGroundAtmosphere: true, //是否在地球上绘制的地面大气
        enableLighting: false, //是否显示昼夜区域
      },
      //以下是Cesium.a
      cameraController: {
        zoomFactor: 3.0, //鼠标滚轮放大的步长参数
        minimumZoomDistance: 1, //地球放大的最小值（以米为单位）
        maximumZoomDistance: 50000000, //地球缩小的最大值（以米为单位）
        enableRotate: true, //2D和3D视图下，是否允许用户旋转相机
        enableTranslate: true, //2D和哥伦布视图下，是否允许用户平移地图
        enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
        enableZoom: true, // 是否允许 用户放大和缩小视图
        enableCollisionDetection: true, //是否允许 地形相机的碰撞检测
      },
    },
    control: {
      baseLayerPicker: false, //basemaps底图切换按钮
      homeButton: false, //视角复位按钮
      sceneModePicker: false, //二三维切换按钮
      navigationHelpButton: false, //帮助按钮
      fullscreenButton: {
        fullscreenElement: document.getElementById("mars3dContainer"),
        enabled: true,
      }, //全屏按钮
    },
    terrain: {
      url: "https://data.mars3d.cn/terrain",
      show: true,
    },
    basemaps: [
      {
        name: "天地图卫星",
        icon: "img/basemaps/tdt_img.jpg",
        type: "tdt",
        layer: "img_d",
        key: ["f24cec70606332017dcd39a4fb60dd11"],
        show: true,
      },
    ],
  };
  maptd = new mars3d.Map("mars3dContainer", mapOptions);
  maptd.scene.globe.depthTestAgainstTerrain = true;

  fly();
  // 创建点位图层
  pointLayer = new mars3d.layer.GraphicLayer({});
  maptd.addLayer(pointLayer);
  // 预警图层
  yjlayer = new mars3d.layer.GraphicLayer();
  maptd.addLayer(yjlayer);
  graphicLayer = new mars3d.layer.GraphicLayer();
  maptd.addLayer(graphicLayer);

};
 
// 开场动画
// const fly = () => {
//     maptd.openFlyAnimation({
//         duration: 0,
//         easingFunction: Cesium.EasingFunction.QUINTIC_IN_OUT,
//         callback: function () {
//             maptd.setCameraView({
//                 "lat": 39.235525,
//                 "lng": 117.542128,
//                 "alt": 22245.1,
//                 "heading": 1.9,
//                 "pitch": -73
//             });
//         },
//     });
//     // map.setCameraView({ "lat": 39.119244, "lng": 117.579352, "alt": 12636, "heading": 352.9, "pitch": -31.2 })
// };
// 开场动画
const fly = () => {
  maptd.openFlyAnimation({
    duration: 1000,
    // easingFunction: Cesium.EasingFunction.QUINTIC_IN_OUT,
    callback: function () {
      // 动画播放完成后回调
      maptd.setCameraView({
        lat: 39.235525,
        lng: 117.542128,
        alt: 22245.1,
        heading: 1.9,
        pitch: -73,
      });
    },
  });
};
//3D视图
const mto3 = () => {
  maptd.scene.morphTo3D(0);
  // maptd.setCameraView({ "lat": 40.49638, "lng": 117.503944, "alt": 1870, "heading": 342.3, "pitch": -12 });
};

//2D视图
const mto2 = () => {
  maptd.scene.morphTo2D(0);
};

// 倾斜摄影
const showdonghai = () => {
  if (!maptd) return
  if (donghaiLayer) {
    donghaiLayer.show = true
    return
  }
  donghaiLayer = new mars3d.layer.TilesetLayer({
    name: "东海",
    // url: "https://172.17.3.6:8080/donghai/tileset.json", // 使用绝对路径
    url: "/donghai/tileset.json", // 使用绝对路径
    maximumScreenSpaceError: 16, // 提高容错以降低精度（默认 16）
    dynamicScreenSpaceError: true, // 动态调整精度
    dynamicScreenSpaceErrorDensity: 0.5, // 提高移动时的加载速度
    skipLevelOfDetail: true, // 跳过中间 LOD
    cullRequestsWhileMoving: true, // 移动时暂停加载
    preloadWhenHidden: false, // 避免后台加载占用资源
    // maximumScreenSpaceError: 1,
    enableDebugWireframe: true, // 显示三角网（调试用）
  });
  maptd.addLayer(donghaiLayer);

  // 模型加载完成事件
  donghaiLayer.on(mars3d.EventType.initialTilesLoaded, function (event) {
    console.log("模型加载完成", event);
  });
};
const showxihai = () => {
  if (!maptd) return
  if (xihaiLayer) {
    xihaiLayer.show = true
    return
  }
  xihaiLayer = new mars3d.layer.TilesetLayer({
    name: "西海",
    // url: "https://172.17.3.6:8080/xihai/tileset.json", // 使用绝对路径
    url: "/xihai/tileset.json", // 使用绝对路径
    maximumScreenSpaceError: 16, // 提高容错以降低精度（默认 16）
    dynamicScreenSpaceError: true, // 动态调整精度
    dynamicScreenSpaceErrorDensity: 0.5, // 提高移动时的加载速度
    skipLevelOfDetail: true, // 跳过中间 LOD
    cullRequestsWhileMoving: true, // 移动时暂停加载
    preloadWhenHidden: false, // 避免后台加载占用资源
    // maximumScreenSpaceError: 1,
    enableDebugWireframe: true, // 显示三角网（调试用）
  });
  maptd.addLayer(xihaiLayer);

  // 模型加载完成事件
  xihaiLayer.on(mars3d.EventType.initialTilesLoaded, function (event) {
    console.log("模型加载完成", event);
  });
};

const closedonghai = () => {
  if (donghaiLayer) {
    donghaiLayer.show = false
  }
}

const closexihai = () => {
  if (xihaiLayer) {
    xihaiLayer.show = false
  }
}

// 创建wms
const addwms = (id, data) => {
  if (layerObj.hasOwnProperty(id)) {
    removelayers(id);
  } else {
    layerObj[id] = new mars3d.layer.WmsLayer({
      url: data.layerUrl,
      layers: data.layerName,
      parameters: {
        transparent: true,
        format: "image/png",
        cql_filter: data.cql,
        STYLES: data.styleId,
      },
      // opacity: 0.5
    });
    if (maptd != null) {
      maptd.addLayer(layerObj[id]);
    }
  }
};

// 删除wms
const removelayers = (id) => {
  maptd.removeLayer(layerObj[id], true);
  delete layerObj[id];
};

//监控点位
//柱状图
const clearEventBarPoint = () => {
  pointLayer.clear();
};
const addEventBarPoint = (data, div) => {
  for (let i = 0; i < data.length; i++) {
    const position = [data[i].lon, data[i].lat, data[i].alt];
    let point = new mars3d.graphic.DivGraphic({
      position: position,

      style: {
        label: {},
        html: div,
        scale: 2,
        scaleByDistance: false,
        clampToGround: true,
        visibleDepth: true,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        highlight: {
          type: mars3d.EventType.click, //默认为鼠标移入，也可以加该参数后单击高亮
          opacity: 0.9,
        },
        //scaleByDistance: new Cesium.NearFarScalar(1000, 1, 5000, 0.5),
      },
      attr: {
        name: data[i].alt,
      },
    });
    pointLayer.addGraphic(point);
  }
};
//分类点位
const addPoint = (data, icon) => {
  for (let i = 0; i < data.length; i++) {
    const position = [data[i].lon, data[i].lat, data[i].alt];
    let point = new mars3d.graphic.BillboardEntity({
      position: position,
      style: {
        label: {},
        image: icon,
        scale: 2,
        scaleByDistance: false,
        clampToGround: true,
        visibleDepth: true,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        scaleByDistance: new Cesium.NearFarScalar(1000, 1, 5000, 0.5),
      },
      attr: {},
    });
    pointLayer.addGraphic(point);
  }
};

//删除点位
const removepoint = () => {
  maptd.removeLayer(pointLayer, true);
};

// 设备点位
const adddevices = (id, data, icon) => {
  //设备点位图层
  devpoint[id] = new mars3d.layer.GraphicLayer({});
  maptd.addLayer(devpoint[id]);
  for (let i = 0; i < data.length; i++) {
    let p = data[i];
    const position = [p.lon, p.lat, p.alt];
    let po = new mars3d.graphic.BillboardEntity({
      position: position,
      style: {
        label: {
          text: p.deviceName,
          font_size: 24, // 字号放大一倍
          scale: 1, // scale传0.5
          font_family: "楷体",
          color: "rgb(253, 231, 78)",
          outline: true,
          outlineColor: "rgb(249, 60, 60)",
          outlineWidth: 2,
          hasPixelOffset: true,
          pixelOffsetY: -50,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.TOP,
          distanceDisplayCondition: true,
          distanceDisplayCondition_far: 5000,
        },
        image: icon,
        scale: 0.6,
        scaleByDistance: true,
        clampToGround: true,
        visibleDepth: true,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      },
      attr: p,
    });
    devpoint[id].addGraphic(po);
  }

  if (id === "mynljk001") {
    let items;
    devpoint[id].bindPopup(
      function (event) {
        // 获取值
        const item = event.graphic.options.attr.hikId;
        const pb = event.graphic.options.attr;

        items = [JSON.parse(pb.channelNumber), pb.serialNumber];
        PopupObj["pb"] = pb;
        // items = [JSON.parse(item.channelNumber) , item.serialNumber];
        if (!item) {
          return false;
        }
        return plays(item).then((re) => {
          var addres = "";
          if (re.data.code == "200") {
            let originalUrl = re.data.data.fmp4;
            let newBase = "https://qilihai.baohuqu.net:8080/gb";
            function replaceBaseUrl(url, newBase, separator) {
              let index = url.indexOf(separator);
              if (index !== -1) {
                // 截取到'/QLHSD'之前的部分
                let newUrl = newBase + url.substring(index);
                return newUrl;
              } else {
                console.log(`标识符 '${separator}' 未找到`);
                return url; // 如果没有找到分隔符，返回原始 URL
              }
            }
            addres = replaceBaseUrl(originalUrl, newBase, "/rtp");
            console.log(addres, 'addres');
          } else {
            ElMessage({
              message: re.data.msg,
              type: "warning",
            });
            // return false
          }
          return `<div class="ls_conters">
                                    <div class="ls_Title" style="height: 50px;">
                                        <span>${pb.deviceName}</span>
                                    </div>
                                    <div class="ls_video">
                                        <video style="width: 100%;height: 100%;background:#000" src=${addres} controls autoplay></video>
                                    </div>
                                    <div class="ls_message">
                                    <div id="reev">
                                        <img src="${yujingxinxi}" alt="">
                                        <span style="margin: 0 16px 0 8px;color:#fff">近期事件</span>
                                        <span class="span1" style="color:#F93C3C;font-size: 26px;">${pb.notices.length
            }</span>
                                        <img style="margin-left: 16px;" src="${jinqishijian}" alt="">
                                    </div>
                                    <div style="width: 1px;"></div>
                                    <div>
                                        <div id="btnAI" style="display: ${pb.checkBirds == 0 ? "none" : ""
            };">
                                        <span>AI识别</span>
                                    </div>
                                    </div>
                                    <div>
                                        <div  data-pcob="${items}" id="btnCk">
                                        <span>查看更多</span>
                                    </div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="ls_arrows"><div class="i_arrows"></div></div>`;
        });
      },
      {
        template: `<div class="marsBlackPanel animation-spaceInDown">
                        <div class="marsBlackPanel-text">{content}</div>
                        <img class="mars3d-popup-close-button closeButton" style="width:.37rem;height:.37rem" src="${CloseIcon}"></img>
                      </div>`,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        offsetY: -10,
        zIndex: 1,
      }
    );
    // const emit = defineEmits(['pop-up'])
    devpoint[id].on(mars3d.EventType.popupOpen, function (event) {
      const container = event.container;
      const btnAI = container.querySelector("#btnAI");
      // const reev = container.querySelector("#reev")
      if (btnAI) {
        btnAI.addEventListener("click", (e) => {
          PopupObj["type"] = "AI";
          emit("PopUp", PopupObj);
        });
      }
      const reev = container.querySelector("#reev");
      if (reev) {
        reev.addEventListener("click", (e) => {
          // console.log(1);
          // emit('revent', PopupObj);
          PopupObj["type"] = "鸟类详情";
          emit("PopUp", PopupObj);
        });
      }
      const btnCk = container.querySelector("#btnCk");
      if (btnCk) {
        btnCk.setAttribute("data-pcob", JSON.stringify(items));
        btnCk.addEventListener("click", (e) => {
          // 获取 data-pcob 属性的值，并将其解析为对象
          let obj = JSON.parse(btnCk.getAttribute("data-pcob"));
          // console.log(obj, 'obj');
          PopupObj["type"] = "查看";
          emit("PopUp", PopupObj);
        });
      }
    });
  }
  // 声纹信息
  if (id === "mysw001") {
    devpoint[id].bindPopup(
      function (event) {
        // 获取值
        const item = event.graphic?.attr;
        const pb = event.graphic.options.attr;
        PopupObj["pb"] = pb;
        // console.log(item, 'item');
        if (item.notices.length == 0) {
          ElMessage({
            message: "暂无《" + item.deviceName + "》声纹信息",
            type: "warning",
          });
        } else {
          let url = JSON.parse(pb.notices[0].bizContent).videoUrl;
          return `<div class="ls_conters">
                                <div class="ls_Title" style="height: 50px;">
                                    <span>${item.deviceName}</span>
                                </div>
                                <div class="ls_video" style="height:100px;padding: 24px;">
                                    <audio style="width: 100%;height: 100%;" src="${url}" controls></audio>
                                </div>
                                <div class="ls_message">
                                    <div id="reev">
                                        <img src="${yujingxinxi}" alt="">
                                        <span style="margin: 0 16px 0 8px;color:#fff">近期事件</span>
                                        <span class="span1" style="color:#F93C3C;font-size: 26px;">${item.notices.length}</span>
                                        <img style="margin-left: 16px;" src="${jinqishijian}" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="ls_arrows">
                                <div class="i_arrows"></div>
                            </div>`;
        }
      },
      {
        template: `<div class="marsBlackPanel animation-spaceInDown" style="width:430px">
                        <div class="marsBlackPanel-text">{content}</div>
                        <img class="mars3d-popup-close-button closeButton" style="width:.37rem;height:.37rem" src="${CloseIcon}"></img>
                      </div>`,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        offsetY: -10,
        zIndex: 1,
      }
    );
    devpoint[id].on(mars3d.EventType.popupOpen, function (event) {
      const container = event.container;
      const reev = container.querySelector("#reev");
      if (reev) {
        reev.addEventListener("click", (e) => {
          // console.log(1);
          // emit('revent', PopupObj);
          PopupObj["type"] = "详情";
          emit("PopUp", PopupObj);
        });
      }
    });
  }
};
const removeDemoLayer = () => {
  graphicLayer.clear();
};

// 3.在graphic数据上绑定Popup单击弹窗局部刷新
const bindGraphicDemo1 = (data, id) => {
  removeDemoLayer();
  const graphic = new mars3d.graphic.BoxEntity({
    position: new mars3d.LngLatPoint(data.lon, data.lat, data.alt),
    style: {
      fill: true,
      color: "#00ff00",
      opacity: 0.9,
    },
    flyTo: true,
    attr: {},
  });
  graphicLayer.addGraphic(graphic);
  // maptd.flyTo({
  //   destination: Cesium.Cartesian3.fromDegrees(
  //     data.lon,
  //     data.lat,
  //     data.alt + 1000
  //   ), // 高度可以适当调整
  //   orientation: {
  //     heading: Cesium.Math.toRadians(0), // 方向
  //     pitch: Cesium.Math.toRadians(-30), // 倾斜角度
  //     roll: 0,
  //   },
  //   duration: 3  // 增加飞行时长，单位是秒
  // });
  // function getInnerHtml(event) {
  //   // let attr = event.graphic.attr
  //   const inthtml = `<div class="ls_conters">
  //                       <div class="ls_Title" style="height: 50px;">
  //                           <span>${data.deviceName}-${data.bizTag}</span>
  //                       </div>
  //                       <div class="ls_video" style="height:100px;padding: 24px;" v-if="data.list.type == 2">
  //                           <audio style="width: 100%;height: 100%;" src="${data.list.videoUrl}" controls></audio>
  //                       </div>
  //                       <div class="ls_video" style="height:200px;padding: 24px;" v-if="data.list.type == 1">
  //                           <video style="width: 100%;height: 100%;" src="${data.list.videoUrl}" controls></video>
  //                       </div>
  //                     </div>`;
  //   return inthtml;
  // }
  function getInnerHtml(event) {
    const videoHtml =
      data.list.type == 2
        ? `<div class="ls_video" style="height:100px;padding: 24px;">
         <audio style="width: 100%;height: 100%;" src="${data.list.videoUrl}" controls></audio>
       </div>`
        : `<div class="ls_video" style="height:300px;padding: 24px;">
         <video style="width: 100%;height: 100%;" src="${data.list.discernPath}" controls></video>
       </div>`;

    const inthtml = `<div class="ls_conters">
                      <div class="ls_Title" style="height: 50px;">
                          <span class="spans">${data.deviceName}-${data.bizTag}</span>
                      </div>
                      ${videoHtml}
                    </div>`;
    return inthtml;
  }

  graphic.on(mars3d.EventType.popupOpen, function (event) {
    const container = event.container; // popup对应的DOM
    console.log("打开了popup", container);
  });
  graphic.on(mars3d.EventType.popupClose, function (event) {
    const container = event.container; // popup对应的DOM
    console.log("移除了popup", container);
  });
  // 绑定Popup
  graphic.bindPopup(getInnerHtml).openPopup();
};

const generateRandomNumber = () => {
  return Math.floor(Math.random() * 9901) + 100; // 10000 - 100 + 1 = 9901
};
const getspeciesDistribute = (data) => {
  if (data.length > 0) {
    let arrPoints = [];
    data.forEach((e) => {
      arrPoints.push({ lng: e.lon, lat: e.lat, value: generateRandomNumber() });
    });
    drawHeat(arrPoints);
  }
};
// 添加热力图
const drawHeat = (arrPoints) => {
  // console.log(arrPoints , 'arrPoints');
  if (heatLayer != null) {
    maptd.removeLayer(heatLayer, true);
    heatLayer = null;
  }
  heatLayer = new mars3d.layer.HeatLayer({
    positions: arrPoints,
    max: 20000,
    heatStyle: {
      radius: 100,
      // minOpacity: 0,
      // maxOpacity: 0.4,
      blur: 0.8,
      gradient: {
        0: "#e9ec36",
        0.25: "#ffdd2f",
        0.5: "#fa6c20",
        0.75: "#fe4a33",
        1: "#ff0000",
      },
    },
    // 以下为矩形矢量对象的样式参数
    // style: {
    //     opacity: 0,
    //     clampToGround: true,
    // },
    style: {
      arc: false, // 是否为曲面
      height: 10,
    },
    flyTo: false,
  });
  if (maptd != null) {
    // console.log(22);
    maptd.addLayer(heatLayer);
  }
};
// 删除设备点位
const deldevices = (id) => {
  maptd.removeLayer(devpoint[id], true);
  delete devpoint[id];
};
// 创建预警点位
const addwi = (data) => {
  // console.log(data);
  yjobj["yj" + data.id] = new mars3d.graphic.CircleEntity({
    position: [data.lon, data.lat, data.alt],
    style: {
      radius: 100,
      height: 50,
      clampToGround: true,
      materialType: mars3d.MaterialType.CircleWave,
      materialOptions: {
        color: "#B8290A",
        count: 3,
        speed: 10,
        gradient: 1,
      },
    },
    attr: {},
  });
  yjlayer.addGraphic(yjobj["yj" + data.id]);
};
//删除预警点
const delwi = (id) => {
  yjlayer.removeGraphic(yjobj["yj" + id], true);
  delete yjobj["yj" + id];
};

onMounted(() => {
  maptdInit();
});

defineExpose({
  mto3,
  mto2,
  addwms,
  removelayers,
  addPoint,
  removepoint,
  adddevices,
  deldevices,
  addwi,
  delwi,
  addEventBarPoint,
  clearEventBarPoint,
  getspeciesDistribute,
  // pointPop,
  bindGraphicDemo1,
  showxihai,
  showdonghai,
  closedonghai,
  closexihai,
});
</script>
<template>
  <div id="mars3dContainer"></div>
</template>
<style scoped>
#mars3dContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
<style>
.ls_conters {
  width: 100%;
  text-shadow: 0px 2px 4px rgba(6, 47, 22, 0.7);
  /* border: 1px solid rgba(60, 249, 137, 0.40); */
  /* background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%); */
  overflow: hidden;
  background: rgba(67, 181, 246, 0.1);
  box-shadow: inset 0px 0px 30px rgba(67, 181, 246, 0.6);
}

.ls_Title {
  width: 4.7rem;
  position: relative;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 0.26rem;
  font-family: "YouSheBiaoTiHei";
  background-image: url("../assets/img/tcbt.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  overflow: hidden;
}

.ls_Title>span {
  margin-left: 16px;
}

.ztmex {
  font-size: 26px;
  color: #3cf989;
  font-family: "myfont";
}

.ls_patrol {
  width: 100%;
  padding-left: 16px;
  line-height: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.ls_arrows {
  width: 100%;
  height: 32px;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.i_arrows {
  width: 32px;
  height: 32px;
  position: absolute;
  top: -16px;
  transform: rotate(45deg);
  text-shadow: 0px 2px 4px rgba(6, 47, 22, 0.7);
  border: 1px solid rgba(60, 249, 137, 0.4);
  background: rgba(0, 15, 6, 0.6);
}

.ls_message {
  width: 100%;
  height: 0.8rem;
  /* font-family: "myfont"; */
  font-size: 0.18rem;
  padding-left: 0.16rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(21, 63, 109, 0.4);
  box-shadow: inset 0px 0px 0.3rem rgba(21, 63, 109, 0.6);
  cursor: pointer;
}

.span1 {
  font-family: "YouSheBiaoTiHei";
}

.ls_message>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ls_message>div:nth-child(2) {
  height: 0.34rem;
  background-color: rgba(230, 247, 255, 0.5);
}

.ls_message>div:nth-child(3) {
  width: 1.12rem;
  height: 0.34rem;
  color: #fff;
  margin-right: 0.24rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,
      rgba(21, 63, 109, 0) 0%,
      rgba(33, 88, 148, 0.8) 100%);
  border-style: solid;
  border-width: 2px;
  border-image: linear-gradient(-180deg,
      rgba(21, 63, 109, 0.8) 100%,
      rgba(33, 88, 148, 0) 0%);
}

.ls_message>div:nth-child(4) {
  width: 1.12rem;
  height: 0.34rem;
  color: #fff;
  margin-right: 0.24rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,
      rgba(21, 63, 109, 0) 0%,
      rgba(33, 88, 148, 0.8) 100%);
  border-style: solid;
  border-width: 2px;
  border-image: linear-gradient(-180deg,
      rgba(21, 63, 109, 0.8) 100%,
      rgba(33, 88, 148, 0) 0%);
}

.marsBlackPanel {
  width: 550px;
  overflow: hidden;
}

.ls_video {
  width: 100%;
  height: 310px;
  overflow: hidden;
}

.mars3d-popup-content-wrapper {
  background: rgb(21 63 119 / 90%);
}

.mars3d-popup-background {
  background: transparent;
}

.mars3d-popup-tip {
  background: rgba(0, 15, 6, 0.6);
}

.mars3d-popup-content {
  margin: 0;
}

.spans {
  display: inline-block;
  /* 让 span 支持宽度和溢出处理 */
  width: 3.7rem;
  /* 定义宽度，超过这个宽度的文本将被截断 */
  color: #fff;
  /* 字体颜色 */
  margin-left: .1rem;
  /* 左边距 */
  white-space: nowrap;
  /* 防止文本换行 */
  overflow: hidden;
  /* 隐藏溢出的文本 */
  text-overflow: ellipsis;
  /* 使用省略号显示溢出的文本 */
}
</style>
